<script lang="ts" setup name="Count">
    import { ref } from 'vue';
    import { useCountStore } from '@/store/count';
    import { storeToRefs } from 'pinia';

    const countStore = useCountStore();

    let { sum, school, location, bigSum, upperSchool } = storeToRefs(countStore);

    // data
    let n = ref(1);     // 用户选择的数字

    // methods
    function add() {
        countStore.increment(n.value);
    }

    function minus() {
        countStore.sum -= n.value;
    }
</script>

<template>
    <div class="count">
        <h2>当前求和为：{{ sum }}，放大10倍后：{{ bigSum }}</h2>
        <h3>欢迎来到：{{ school }}，坐落于：{{ location }}，大写：{{ upperSchool }}</h3>
        <!-- v-model.number会将收集到的东西 尽可能的 转换成number -->
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add">加</button>
        <button @click="minus">减</button>
    </div>
</template>

<style scoped>
    .count {
        background-color: skyblue;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 0 10px;
    }
    .count button {
        margin: 0 5px;
        width: 50px;
    }
    .count select {
        width: 40px;
    }
</style>